<template>
  <div class="detail">
    <div
      class="top"
      :style="{
        background: 'url(' + singDetail.artist.cover + ')',
        'background-size': 'cover',
        'background-position': 'center -30px',
      }"
    >
      <div class="top-cent">
        <img :src="singDetail.artist.cover" alt="" class="headimg" />
        <p class="name">
          <span>{{ singDetail.artist.name }}</span>
          <img :src="singDetail.identify.imageUrl" alt="" class="idimg" />
        </p>
        <p class="rank">
          <span>{{ singDetail.identify.imageDesc }}</span>
          <span>Lv.{{ singDetail.artist.rank.rank }}</span>
        </p>
        <p class="follow">
          <span>+ 关注</span>
          <van-icon name="comment-circle-o" />
          <van-icon name="more-o" />
        </p>
      </div>
    </div>
    <van-tabs background="rgb(248, 246, 246)">
      <van-tab title="主页">
        <div class="my">
          <p>艺人百科</p>
          <p>
            <img :src="singDetail.identify.imageUrl" alt="" class="idimg" />
            <span>{{ singDetail.identify.imageDesc }}</span>
          </p>
          <p>
            艺人名：<span>{{ singDetail.artist.name }}</span>
          </p>
          <p>身份：{{ singDetail.identify.imageDesc }}</p>
          <p>
            介绍：<span> {{ singDetail.artist.briefDesc }}</span>
          </p>
        </div>
      </van-tab>
      <van-tab title="歌曲">
        <div class="music">
          <p class="tit">
            <van-icon name="play-circle-o" color="red" size="22" />
            <span>播放全部</span>
          </p>
          <div
            v-for="(item, index) in hotMusic"
            :key="item.id"
            @click="gosongDetail(item.id)"
          >
            <div class="mleft">
              <span>{{ index + 1 }}</span>
              <div>
                <p class="name">
                  {{ item.name }}
                </p>
                <p class="singer">
                  <span v-for="item2 in item.ar" :key="item2.id"
                    >{{ item2.name }}
                  </span>
                  -
                  <span>{{ item.al.name }}</span>
                </p>
              </div>
            </div>
            <div class="mright">
              <van-icon name="play-circle-o" color="gray" size="20" />
              <van-icon name="more-o" color="gray" size="20" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="专辑">
        <div class="artist" v-if="showAlbumSongs">
          <div v-for="item in artist" :key="item.id" @click="getAlbum(item.id)">
            <img :src="item.picUrl" alt="" />
            <div>
              <p>{{ item.name }}</p>
              <p>
                <span>{{ item.publishTime | filterTime }}</span>
                <span>{{ item.size }}首</span>
              </p>
            </div>
          </div>
        </div>
        <!-- 显示专辑里的歌曲 -->
        <div class="music" v-else>
          <p class="tit">
            <van-icon name="play-circle-o" color="red" size="22" />
            <span>播放全部</span>
            <van-icon name="cross" @click="gobackalbum" class="gobackalbum" />
          </p>
          <div
            v-for="(item, index) in albumList"
            :key="item.id"
            @click="gosongDetail(item.id)"
          >
            <div class="mleft">
              <span>{{ index + 1 }}</span>
              <div>
                <p class="name">
                  {{ item.name }}
                </p>
                <p class="singer">
                  <span v-for="item2 in item.ar" :key="item2.id"
                    >{{ item2.name }}
                  </span>
                  -
                  <span>{{ item.al.name }}</span>
                </p>
              </div>
            </div>
            <div class="mright">
              <van-icon name="play-circle-o" color="gray" size="20" />
              <van-icon name="more-o" color="gray" size="20" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="视频">
        <div
          class="mv"
          v-for="item in mv"
          :key="item.id"
          @click="toVideo(item.id)"
        >
          <img :src="item.imgurl" alt="" />
          <div>
            <p>{{ item.name }}</p>
            <p>{{ item.publishTime }}</p>
            <p>
              <van-icon name="play-circle-o" />
              <span>{{ (item.playCount / 10000).toFixed(1) }}播放量</span>
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="动态">
        <van-empty description="暂无内容" />
      </van-tab>
      <van-tab title="播客">
        <van-empty description="暂无内容" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      singDetail: "",
      hotMusic: "",
      artist: "",
      mv: "",
      albumList: "",
      showAlbumSongs: true,
    };
  },
  computed: {},
  watch: {},
  filters: {
    filterTime: function (value) {
      let time = new Date(value);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      return `${y}-${m}-${d}`;
    },
  },
  methods: {
    //   获取歌手详情信息
    async getsingerdetail() {
      const res = await this.$http.get(
        `http://localhost:3000/artist/detail?id=${this.id}`
      );
      //   console.log(res);
      this.singDetail = res.data.data;
      console.log("歌手信息", this.singDetail);
    },
    //获取此歌手的热门前50首歌
    async getHotMusic() {
      const res = await this.$http.get(
        `http://localhost:3000/artist/top/song?id=${this.id}`
      );
      this.hotMusic = res.data.songs;
      console.log("热门50首", this.hotMusic);
    },
    //获取此歌手专辑信息
    async getArtist() {
      const res = await this.$http.get(
        `http://localhost:3000/artist/album?id=${this.id}`
      );
      //   console.log(res);
      this.artist = res.data.hotAlbums;
      console.log("专辑列表", this.artist);
    },
    //获取歌手mv
    async getmv() {
      const res = await this.$http.get(
        `http://localhost:3000/artist/mv?id=${this.id}`
      );
      this.mv = res.data.mvs;
      console.log("歌手mv", this.mv);
    },
    //去播放视频
    toVideo(mid) {
      this.$router.push({
        path: "/singsmv/" + mid,
      });
    },
    //播放歌曲
    gosongDetail(id) {
      // console.log(id);
      this.$router.push(`/songdetail/${id}`);
    },
    //获取专辑内容
    async getAlbum(id) {
      const res = await this.$http.get(`http://localhost:3000/album?id=${id}`);
      this.showAlbumSongs = false;
      this.albumList = res.data.songs;
      console.log("专辑歌曲", this.albumList);
    },
    gobackalbum() {
      this.showAlbumSongs = true;
    },
  },
  created() {
    console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    this.getsingerdetail();
    this.getHotMusic();
    this.getArtist();
    this.getmv();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.mv {
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.mv img {
  width: 40%;
  height: 90px;
  margin-right: 15px;
  border-radius: 15px;
}
.mv > div {
  width: 58%;
  font-size: 14px;
  color: rgb(124, 124, 124);
}
.mv > div p:nth-child(1) {
  font-weight: bold;
  color: rgb(68, 68, 68);
  font-size: 17px;
  margin-bottom: 15px;
}
.mv > div p:nth-child(3) span {
  margin-left: 5px;
}
.detail {
  padding-bottom: 55px;
}
.top {
  width: 100%;
  height: 300px;
  position: relative;
  border-radius: 0 0 10px 10px;
  text-align: center;
}
.top-cent {
  width: 95%;
  height: 150px;
  background-color: #fff;
  position: absolute;
  bottom: -130px;
  left: 10px;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.top-cent .headimg {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  top: -35px;
  left: 42%;
}
.top-cent .name {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-cent .name span {
  font-size: 22px;
  font-weight: bold;
  margin-right: 8px;
}
.idimg {
  width: 18px;
  height: 18px;
}
.top-cent .rank {
  font-size: 14px;
  margin-top: 5px;
}
.top-cent .rank span:first-child {
  color: blrgb(75, 75, 75);
  margin-right: 10px;
}
.top-cent .follow {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-cent .follow span {
  margin-right: 10px;
  padding: 5px 18px;
  background: red;
  border-radius: 15px;
  font-size: 14px;
  color: rgb(252, 227, 227);
}
.top-cent .follow .van-icon {
  font-size: 25px;
  margin-right: 10px;
}
.van-tabs {
  margin-top: 150px;
}
.my {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  border-radius: 15px;
  padding: 15px;
  box-sizing: border-box;
  line-height: 1.6;
  font-size: 14px;
}
.my p {
  margin-top: 8px;
}
.my p:nth-of-type(1) {
  font-weight: bold;
  font-size: 18px;
  margin-top: 0;
}
.my p:nth-of-type(2) {
  display: flex;
  align-items: center;
}
.music {
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.music .tit {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
}
.music .tit span {
  font-weight: bold;
  margin-left: 5px;
}
.music > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.music .mleft {
  width: 88%;
  display: flex;
  align-items: center;
}
.music .mleft > span {
  margin-right: 15px;
}
.music .mleft > div p:first-child {
  font-weight: bold;
  font-size: 17px;
  color: rgb(66, 66, 66);
}
.music .mleft > div p:last-child {
  font-size: 14px;
  margin-top: 3px;
  color: rgb(82, 82, 82);
}
.music .mright {
  width: 12%;
  display: flex;
  justify-content: space-around;
}
.artist {
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.artist > div {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.artist img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}
.artist > div > div p:nth-child(1) {
  font-size: 17px;
  color: rgb(66, 66, 66);
  font-weight: bold;
  margin-bottom: 3px;
}
.artist > div > div p:nth-child(2) {
  font-size: 14px;
  color: rgb(95, 95, 95);
}
.artist > div > div p:nth-child(2) span:nth-child(1) {
  margin-right: 5px;
}
.gobackalbum {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
